<template>
  <div>
    <div class="columns">
      <oolongUpload action="//jsonplaceholder.typicode.com/posts/">
        <oolongButton icon="ios-cloud-upload-outline">Upload files</oolongButton>
      </oolongUpload>
    </div>
    <div class="columns">
      <oolongUpload
        multiple
        action="//jsonplaceholder.typicode.com/posts/">
        <oolongButton icon="ios-cloud-upload-outline">Upload files</oolongButton>
      </oolongUpload>
    </div>
    <div class="columns">
      <oolongUpload
        :before-upload="handleUpload"
        action="//jsonplaceholder.typicode.com/posts/">
        <oolongButton icon="ios-cloud-upload-outline">Select the file to upload</oolongButton>
      </oolongUpload>
      <div v-if="file !== null">
        Upload file: {{ file.name }}
        <oolongButton type="text" @click="upload" :loading="loadingStatus">
          {{ loadingStatus ? 'Uploading' : 'Click to upload' }}
        </oolongButton>
      </div>
    </div>
    <div class="columns">
      <oolongUpload
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/">
        <div style="padding: 20px 0">
          <oolongIcon type="ios-cloud-upload" size="52" style="color: #3399ff">
          </oolongIcon>
          <p>Click or drag files here to upload</p>
        </div>
      </oolongUpload>
    </div>

  </div>
</template>

<script>
export default {
  name: 'upload',
  data() {
    return {
      file: null,
      loadingStatus: false
    }
  },
  methods: {
    handleUpload(file) {
      this.file = file;
      return false;
    },
    upload() {
      this.loadingStatus = true;
      setTimeout(() => {
        this.file = null;
        this.loadingStatus = false;
        this.$Message.success('Success')
      }, 1500);
    }
  }
}
</script>

<style scoped>

</style>
